<template>
  <div class="detail">
    <el-container>
      <el-main>
        <el-tabs value="first">
          <el-tab-pane label="基本信息" name="first">
            <el-form label-width="80px" :model="infoForm">
              <el-descriptions>
                <el-descriptions-item label="员工编号" class="descriptionsItem">
                  <template>
                    <el-form-item label-width="auto" style="margin: 0">
                      <span v-if="editBtnShow">{{ driverInfo.userId }}</span>
                      <el-input v-else v-model="infoForm.userId" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="司机名称">
                  <template>
                    <el-form-item label-width="auto">
                      <span v-if="editBtnShow">{{ driverInfo.name }}</span>
                      <el-input v-else v-model="infoForm.name" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="所属机构 ">
                  <template>
                    <el-form-item label-width="auto">
                      <span v-if="editBtnShow">{{ driverInfo.agency.name }}</span>
                      <el-input v-else v-model="infoForm.agency" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="电话">
                  <template>
                    <el-form-item label-width="auto">
                      <span v-if="editBtnShow">{{ driverInfo.mobile }}</span>
                      <el-input v-else v-model="infoForm.mobile" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="年龄">
                  <template>
                    <el-form-item label-width="auto">
                      <span v-if="editBtnShow">{{ driverInfo.age }}</span>
                      <el-input v-else v-model="infoForm.age" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="驾驶证信息" name="second">
            <el-form label-width="80px" :model="licenceForm">
              <el-descriptions>
                <el-descriptions-item label="驾驶证号">
                  <template>
                    <el-form-item label-width="auto" style="margin: 0">
                      <span v-if="editBtnShow">{{ license.licenseNumber }}</span>
                      <el-input v-else v-model="licenceForm.licenseNumber" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="准驾车型 ">
                  <template>
                    <el-form-item label-width="auto" style="margin: 0">
                      <span v-if="editBtnShow">{{ license.allowableType }}</span>
                      <el-input v-else v-model="licenceForm.allowableType" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="初次领证日期">
                  <template>
                    <el-form-item label-width="auto" style="margin: 0">
                      <span v-if="editBtnShow">{{ license.initialCertificateDate }}</span>
                      <el-input v-else v-model="licenceForm.initialCertificateDate" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="驾驶证有效期限">
                  <template>
                    <el-form-item label-width="auto" style="margin: 0">
                      <span v-if="editBtnShow">{{ license.validPeriod }}</span>
                      <el-input v-else v-model="licenceForm.validPeriod" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="驾龄">
                  <template>
                    <el-form-item label-width="auto" style="margin: 0">
                      <span v-if="editBtnShow">{{ license.driverAge }}</span>
                      <el-input v-else v-model="licenceForm.driverAge" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="驾驶证类型">
                  <template>
                    <el-form-item label-width="auto" style="margin: 0">
                      <span v-if="editBtnShow">{{ license.licenseType }}</span>
                      <el-input v-else v-model="licenceForm.licenseType" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="从业资格证">
                  <template>
                    <el-form-item label-width="auto" style="margin: 0">
                      <span v-if="editBtnShow">{{ license.qualificationCertificate }}</span>
                      <el-input v-else v-model="licenceForm.qualificationCertificate" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="入场证信息">
                  <template>
                    <el-form-item label-width="auto" style="margin: 0">
                      <span v-if="editBtnShow">{{ license.passCertificate }}</span>
                      <el-input v-else v-model="licenceForm.passCertificate" placeholder="请输入内容" />
                    </el-form-item>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
              <div class="photo">
                <span>图片信息</span>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="license.picture"
                  :preview-src-list="license.picture"
                />
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-main>

      <el-footer>
        <el-button @click="$router.go(-1)">返回</el-button>
        <el-button v-if="editBtnShow" type="primary" @click="editBtnShow = false">编辑</el-button>
        <span v-else>
          <el-button type="primary">保存</el-button>
          <el-button @click="editBtnShow = true">取消</el-button>
        </span>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { getDriverInfo, driverLicense } from '@/api/website'

export default {
  data() {
    return {
      // 司机基本信息详情
      driverInfo: {
        userId: '',
        name: '',
        agency: {
          name: ''
        },
        mobile: '',
        age: ''
      },
      // 司机驾驶证信息
      license: {
        licenseNumber: '',
        allowableType: '',
        initialCertificateDate: '',
        validPeriod: '',
        driverAge: '',
        licenseType: '',
        qualificationCertificate: '',
        passCertificate: ''
      },
      // 下方按钮切换
      editBtnShow: true,
      // 司机基本信息表单
      infoForm: {
        userId: '',
        name: '',
        agency: '',
        mobile: '',
        age: '',
        avatar: '', // 所属机构
        workNumber: '',
        workStatus: ''
      },
      // 驾驶证信息表单
      licenceForm: {
        licenseNumber: '',
        allowableType: '',
        initialCertificateDate: '',
        validPeriod: '',
        driverAge: '',
        licenseType: '',
        qualificationCertificate: '',
        passCertificate: ''
      }
    }
  },

  created() {
    this.getDriver()
    this.getLicense()
  },

  methods: {
    // 获取司机详情信息
    async getDriver() {
      const result = await getDriverInfo(this.$route.params.id)
      this.driverInfo = result.data.data
    },

    // 获取司机驾驶证信息
    async getLicense() {
      const result = await driverLicense(this.$route.params.id)
      this.license = result.data.data
    }
  }
}
</script>

<style scoped>
.detail {
  width: 100%;
  height: 100vh;
  margin: 20px;
  padding: 24px 60px;
  background-color: #fff;
}

footer {
  padding: 20px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.photo {
  display: flex;
}

.photo span {
  margin-right: 30px;
}

::v-deep .el-descriptions-item__container {
  display: flex;
  align-items: center
}

::v-deep .el-descriptions-item__container {
  display: flex;
  align-items: center;
}

::v-deep .el-form-item {
  margin: 0 !important;
}
</style>
